<!DOCTYPE html>
<html lang="en">
<head>
    <!-- import CSS -->
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #333;
            background-color: #fff;
            box-sizing: border-box;
        }



.mycontent {
    background-image: url("images/index/bg1.jpg");
    width: 100%;
    height: 500px;
    border: none;
    margin: 0;


}
.text-left{
text-align: center;
}
div{
    display: block;
}
.regDiv{
    height: 280px;
    width: 500px;
    background-color: rgba(255,255,255,0.85);
    float: right;
    margin: 90px 60px 0 0;
    border-radius: 10px;
    color: #666666;
    padding: 8px;
    box-sizing: border-box;
    border: none;
}
.form-horizontal{
    margin-left: -15px;
    margin-right: -15px;
    box-sizing: border-box;
}
.form-group{
    margin-bottom: 15px;
}

        .col-md-3{
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            font-size: 18px;
            box-sizing: border-box;
        }


    </style>
</head>
<body>
<div>
<!-- 头部!-->
<el-container>
<el-header>
    <el-container style="background-color:gainsboro">
        <el-aside style="width: 500px">
            <img src="images/index/p2.jpg" style="width:100px;height:90px;color: gainsboro ">
            <p style="display: inline-block;position:relative;bottom: 38px;font-size: 22px;color: gray"> 学霸商城</p>
        </el-aside>
        <el-main>
               <span style="float: right;font-size: 30px;margin-right: 15px">欢迎访问<b>学霸商城</b></span>
        </el-main>
        </el-container>
    <!--header 结束-->
</el-header>
<!-- !!! 主体-->
<el-main style="margin: 0;height: 500px;overflow: hidden">

<div class=" mycontent text-left">
    <div class="regDiv">
        <p style="position: relative; right: 200px;bottom: 15px;font-size: 15px"> 新用户注册</p>
        <!--! 表单开始-->
        <form class="form-horizontal" role="form">
            <!--用户名-->
            <div class="form-group">
                <div class="col-md-8">
                    <label class="col-md-3 control-label">名字：</label>
                    <el-input v-model="user.username" style="position: relative;left: 17px ;width: 300px" type="text"  placeholder="请输入用户名" ></el-input>
                </div>
            </div>
            <!--密码-->
            <div class="form-group">
                <div class="col-md-8">
                    <label class="col-md-3 control-label"> 密码：</label>
                    <el-input v-model="user.password" style="position: relative;left: 17px ;width: 300px" type="text"  placeholder="请输入密码"></el-input>
                </div>
            </div>
            <!--确认密码-->
            <div class="form-group">
                <div class="col-md-8">
                    <label class="col-md-3 control-label"> 确认密码：</label>
                    <el-input v-model= "user.passwordConfirm"  style="width: 300px" type="text " placeholder="请再次输入密码"></el-input>
                </div>
            </div>
            <!--提交按钮-->
                <div>
                    <input style="color: #fff;background-color: #428bca; border-color: #357ebd;" type="button" value="立即注册" @click="reg()">
                    <span style="position: relative;left: 110px"><small>已经有账号？</small><a href="login.html">登录</a></span>
                </div>
        </form>
    </div>
</div>
    <!-- 主体 结束-->
</el-main>
<!-- !!! 页脚开始-->
<el-footer >
        <!-- 品质保障，私人定制等-->
            <div style="width: 100%;margin: 0 auto;text-align: center;position: relative;top: 0;background-color: gainsboro">
                <p style="display: inline-block;font-size: 20px;">品质保障  私人订制   学生特供   专属特权</p>
            </div>
</el-footer>
</el-container>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
    let v = new Vue({
        el: "body>div",
        data: {
            user: {
                username: "",
                password: "",
                passwordConfirm:""
            }
        },
        methods: {
            reg() {
                // document.getElementById().value;
                axios.post("/reg", v.user).then(function (response) {
                    if (response.data == 1) {
                        alert("注册成功!");
                        location.href = "/login.html";
                    } else if(response.data==2){
                        alert("用户名已存在!");
                    } else {
                        alert("两次密码不一致!")
                    }

                })
            }
        },
        created: function () {

        }
    })
</script>
</body>
</html>